<template>
     <div class="main-body">
    <!-- <工具栏- -->
    <div class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" :placeholder="t('thead.username')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="search" type="primary" @click="doSearch">{{ t('actions.search') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="plus" type="primary" @click="doAdd">{{ t('actions.add') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <表格内容栏 -->
    <cm-table
      ref="tableRef"
      :get-page="listPage"
      :filters="filters"
      :columns="columns"
      :operations="operations"
      @handleEdit="doEdit"
      @handleDelete="handleDelete"
    />
  </div> 


<!--新增编辑页面  -->
<el-dialog
  :title="isEdit ? t('actions.edit') : t('actions.add')"
   v-model="dialogVisible"
   draggable
   width="40%"
   :close-on-click-modal="false"
   @click="doClose"
   >
     <el-form ref="formRef" :model="form" label-width="80px" :rules="rules" label-position="right">
        <el-form-item :label="t('form.username')" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item :label="t('form.group')" prop="roleId">
            <el-select v-model="form.roleId" :placeholder="t('form.choose')" style="width: 100%;">
                <el-option v-for="item in roles" :key="item.name" :label="item.label" :value="item.name"></el-option>
            </el-select>
        </el-form-item>
     </el-form>
     <template #footer>
        <el-button @click="doClose">{{ t("actions.cancel") }}</el-button>
        <el-button v-if="isEdit" type="primary" @click="handleSetPsw">{{ t("form.resetPassword") }}</el-button>
        <el-button 
          type="primary"
          @click="handleSubmit"
          :loading="formLoading"
          >{{ "actions.submit" }}</el-button>
     </template>
   </el-dialog>
</template>

<script setup>
import { listPage, save, update, setPsw, remove } from "@/apis/sys-user";
import { roles } from '@/mock/data';
import useTableHandlers from '../use-table-handlers';
const filters = reactive({
    name:'',
})
const form = reactive({
    id:"",
    name:"",
    roleId:"",
})
const {
    t,
    tableRef,
    dialogVisible,
    isEdit,
    formLoading,
    formRef,
    doSearch,
    doEdit,
    doSubmit,
    doRemove,
    doClose
} = useTableHandlers(form);
const operations = [
    {
        type:'edit',
        show: (row) => row.createdBy != 'system'
    },
    {
        type:'delete',
        show:row => row.createdBy != 'system'
    }
]

//computed
const columns = computed(() => [
    {type: 'selection', selection:isSelectable },
    {prop: "id",label:t("thead.ID"),minWidth:50},
    {prop: "name", label:t("thead.username"),minWidth:120},
    {prop: "roleName", label:t("thead.group"),minWidth:120},
    {prop: "createdBy", label:t("thead.createdBy"),minWidth:120},
    {prop: "ip", label:t("thead.latestIp"),minWidth:100},
    {prop: "visiTime", label:t("thead.latestVisit"),minWidth:120},
])
const rules = computed(() => {
    return{
        name:[
            { required: true,message: t('form.usernameHolder'),trigger: ['blur','change']},
        ],
        roleId:[
        { required: true,message: t('form.roleRequired'),trigger: ['blur','change']},
        ]
    }
})
//methods
function isSelectable(row) {
    return row.createdBy !== 'system';
}

function handleDelete(ids,callback) {
    doRemove(remove,ids,callback)
}
function handleSubmit(){
    doSubmit({ save,update },(res) => {
        if (!isEdit.value) {
            ELMessageBox.alert(
        `${t('tips.success')}${t('form.username')}: ${res.data.name},${t('form.password')}: ${res.data.password}`,
         t('tips.title'),
         {
            confirmButtonText: t('actions.confirm')
         }
            )
        }
    })
}
function handleSetPsw() {
  setPsw({ ...form }).then(res => {
    ElMessageBox.alert(
      `${t('tips.success')}${t('form.username')}: ${res.data.name},${t('form.password')}: ${res.data.password}`,
      t('tips.title'),
      {
        confirmButtonText: t('action.confirm'),
      }
    )
  })
}
</script>